<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
  <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="utf-8" http-equiv="content-type" content="text/html">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>新建物语</title>

<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="css/square-dispatch.css" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/need/layer.css"/>

<script>
$(document).bind('mobileinit',function(){
 $.mobile.changePage.defaults.changeHash = false;
 $.mobile.hashListeningEnabled = false;
 $.mobile.pushStateEnabled = false;
});
</script>
<script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
<script src="js/layer.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page">
	<div data-role="header" id="header">
		<h1>物语新建</h1>
	</div>
	<div data-role="content" id="content">
		<input class="title" type="text" data-role="none" placeholder="标题（可选）" name="title" />
		<div class="select">
			<label>话题</label>
			<select data-role="none" name="topic">
				<option value="null">请选择</option>
				<c:forEach items="${sList}" var="st" varStatus="stuts">
				<option value="${st.id }">${st.name }</option>
				</c:forEach>
			</select>
		</div>
		<textarea data-role="none" name="content"></textarea>
		<div class="divImageHolder">
		</div>
	</div>
	<div data-role="footer" id="footer">
		<div class="f-box">
			<img class="smile" src="images/smile2.png" />
			<img class="pic" src="images/pic.png" onclick="openPic()" />
			<input type="button" value="发布" data-role="none" onclick="wxupload()"/>
		</div>
	</div>
</div>
</body>
<!-- 微信功能接口 -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">

/**
 * 调用微信接口
 */
var appId = '${appId}';
var timestamp= '${timestamp}';
var nonceStr='${nonceStr}';
var signature= '${signature}'; 
wx.config({
      debug: false,
      appId: appId,
      timestamp: timestamp,
      nonceStr: nonceStr,
      signature: signature,
      jsApiList: [
        'checkJsApi',
        'onMenuShareTimeline',
		'onMenuShareAppMessage',
		'onMenuShareQQ',
		'onMenuShareWeibo',
		'chooseImage',
		'uploadImage',
		'getLocation'
      ]
  });
/**
 * 用于存储相片
 * 用户本地图片id
 * 微信服务器图片id
 * used2云服务器 图片Url
 */
var images = {
	    localId: [],
	    serverId: [],
	    yunUrl :[] 
	  };
//显示选择的图片
function showChooseImage(){
  var len = images.localId.length;
  var ul = $(".divImageHolder");
  //清空
  
  var imgs = '';
  for(var i = len -1 ;i >= 0; i--){
	  imgs+= '<img src="'+images.localId[i]+'"/>'
  }
  $(".divImageHolder").html(imgs);
}

//选择图片
function openPic(){
	wx.chooseImage({
	    count: 9, // 默认9
	    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
	    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
	    success: function (res) {
	    	images.localId = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片 
	    	showChooseImage();
	  	}
	});
};

/**
 * 上传到微信服务器
 */
 var i=0;
 var serverIds='';
function wxupload(){
	var length = images.localId.length;
	if(images.localId.length==0){
		var obj = {serverIds:''};
		save(obj);
		return ;
	}
	wx.uploadImage({
		localId: images.localId[i], // 需要上传的图片的本地ID，由chooseImage接口获得
		isShowProgressTips: 0, // 默认为1，显示进度提示
		success: function (res) {
			var serverId = res.serverId; // 返回图片的服务器端ID
		    serverIds+=res.serverId+",";
			images.serverId.push(serverId);
			if(images.serverId.length==length){
				serverIds=serverIds.substring(0,serverIds.length-1);
				//利用serverIds干什么
				var obj = {serverIds:serverIds};
				save(obj);
			}else{
				i++;
				wxupload();
			}
		},
		fail:function(res){
			for(i in res ){
				  alert(i);           //获得属性 
				  alert(res[i]);  //获得属性值
				}
			}
	});

}

//保存事件
function save(obj){
	obj["title"]=$("#content input[name='title']").val();
	obj["topicId"] = $("#content select[name='topic']").val();
	obj["content"] = $("#content textarea[name='content']").val();
	var tip = '';
	if($.trim(obj["title"])==''){
		tip='亲，题目必须要填哦！';
	}else if(obj["topicId"]=='null'){
		tip='亲，话题一定要选哦！';
	}else if($.trim(obj["content"])==''){
		tip='亲，你一点话都不说吗？'
	}
	if(tip!=''){
		layer.open({
		    content: tip
		    ,btn: '我知道了,这就写'
		  });
		return ;
	}
	 
	//alert(JSON.stringify(obj));
	$.post("api/write/checkPublishSqure.do",obj,function(data){
		if(data["STATUS"]=="OK"){
			location.href = "api/square.do";
		}else{
			  layer.open({
			    content: data.DESC
			    ,btn: '我知道了'
			  });
		}
	});
}
</script>
</html>